<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个体用户系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

        button[id="search1"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.766);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 110px;
            left:830px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search2"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 210px;
            left:830px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search3"]{
            appearance: none;
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 310px;
            left:830px;
            font-size: 24px;
            font-weight: 500;
        }
        button[id="search4"]{
            position: absolute;
            color: rgba(0, 0, 0, 0.641);
            background-color: rgb(255, 255, 255);
            border: 10px;
            border-radius: 10px;
            top: 410px;
            left:830px;
            font-size: 24px;
            font-weight: 500;
        }
        input[name="id"]{
            appearance: none;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 500px;
            top: 120px;
        }
        input[name="name"]{
            appearance: none;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 500px;
            top: 220px;
        }
        input[name="author"]{
            appearance: none;
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 500px;
            top: 320px;
        }
        select[name="type"]{
            background-color: rgb(255, 255, 255);
            border-radius: 4px;
            color: rgba(0, 0, 0, 0.536);
            border: 0;
            width: 300px;
            height: 30px;
            position:absolute;
            left: 500px;
            top: 420px;
        }
        button[name="select"]{
            appearance: none;
            position: absolute;
            background-color: rgba(255, 255, 255, 0);
            border: 0;
            color: rgba(240, 248, 255, 0.908);
            top: 65px;
            left:900px;
            font-size: 30px;
        }
        #photo1{
            position: absolute;
            top: 0px;
            left:0px;
        }
        #frame1{
            background-color: rgba(253, 250, 247, 0.81);
            border-radius: 4px;
            width: 550px;
            height: 500px;
            position:absolute;
            left: 400px;
            top: 60px;
        }
        #re{
            position: absolute;
            top: 500px;
            left: 680px;
        }
    </style>
    <script>
        function clearInputID() {
            document.getElementById('id').value = '';
        }
        function clearInputNAME() {
            document.getElementsByName('name').value = '';
        }
        function clearInputAUTHOR() {
            document.getElementsByName('author').value = '';
        }
        function clearInputTYPE() {
            document.getElementsByName('type').value = '';
        }

    </script>
</head>
<body>
<p id="photo1"><img src="https://zs.stu.edu.cn/images/21/06/11/1vtx9km97b/_K012215.jpg" width="1450" height="720"/></p >
<p id="frame1"></p >

<form action="searchid2" method="POST" onsubmit="clearInputID()">
    <input type="text" placeholder="请输入id"  name="id"/>
    <button type="submit" class="btn btn-default navbar-btn" id="search1"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form action="searchname2" method="POST" onsubmit="clearInputNAME()">
    <input type="text" placeholder="请输入图书名称" name="name"/>
    <button type="submit" class="btn btn-default navbar-btn" id="search2"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form action="searchauthor2" method="POST" onsubmit="clearInputAUTHOR()">
    <input type="text" placeholder="请输入图书作者" name="author"/>
    <button type="submit" class="btn btn-default navbar-btn" id="search3"><span class="glyphicon glyphicon-search"></span></button>
</form>
<form action="searchtype2" method="POST" onsubmit="clearInputTYPE()">
    <select name="type" class="form-control" >
        <option value="空" selected>请选择图书类型</option>
        <option value="文学">文学</option>
        <option value="科技">科技</option>
        <option value="教育">教育</option>
        <option value="艺术">艺术</option>
        <option value="军事">军事</option>
    </select>
    <button type="submit" class="btn btn-default navbar-btn" id="search4"><span class="glyphicon glyphicon-search"></span></button>
</form>
<button onclick="window.location.href='1.jsp'" id="re">返回</button>
</body>
</html>